<template>
    <div>
      <mt-header fixed title="上传">
         <router-link to="/" slot="left"> 
           <mt-button icon="back">返回</mt-button>
         </router-link>
      </mt-header>
      <!--捐赠表单-->
      <div class="dq">
      <mt-field label="书名" placeholder="请输入书名"></mt-field>
      <mt-field label="作者" placeholder="请输入作者名"></mt-field>
      <!--捐赠书本类型选择-->
      <mt-cell slot="left" title="类别" class="type">
        <div class="aaa">
          <select v-model="abc"  >
            <option v-for="option in options" v-bind:value="option.value" >
             {{ option.text }}
            </option>
          </select>
        </div>
      </mt-cell>
      <mt-field label="捐赠者" placeholder="请输入您的姓名"></mt-field>
      <mt-field label="手机号" placeholder="请输入您的手机号" type="tel" :attr="{ maxlength: 11 }"></mt-field>
      <mt-field label="内容介绍" placeholder="请输入书本内容介绍" type="textarea" rows="4"></mt-field>
      </div>
      </br>
      <!--隐藏的菜单-->
      <div class="page-actionsheet">
         <div class="page-actionsheet-wrapper">
            <mt-button plain @click.native="sheetVisible = true" size="large">添加图片</mt-button>
         </div>
         <mt-actionsheet :actions="actions" v-model="sheetVisible"></mt-actionsheet>
      </div>
      </br>
      <mt-button plain size="large" @click.native="uploadFile">提交</mt-button>
      <!--提交进度条-->
      <mt-progress :value="value" v-if="progressVisible" transition="progress-fade">
        <div slot="end">{{ value }}%</div>
      </mt-progress>
    </div>
</template>
<script>
import { Toast } from 'mint-ui';

export default {
    data() {
      return {
        sheetVisible: false,//隐藏菜单
        actions: [],
        progressVisible: false,//隐藏进度条
        value: 0,
        uploading: false,
        timer: null,
        abc: '请选择书本类别',
            options: [
                { text: '请选择书本类别', value: '请选择书本类别' },
                { text: '小说类', value: '小说类' },
                { text: '文学类', value: '文学类' },
                { text: '科幻类', value: '科幻类' },
                { text: '实用类', value: '实用类' }
            ]
      };
    },

    watch: {
      value(val) {
        if (val >= 100) {
          this.uploading = false;
          this.progressVisible = false;
          setTimeout(() => Toast({ message: '上传成功', position: 'bottom', duration: 1000 }), 200);
          clearTimeout(this.timer);
        }
      }
    },

    methods: {
      takePhoto() {
        console.log('taking photo');
      },

      openAlbum() {
        console.log('opening album');
      },

      goBack() {
        history.go(-1);
      },

      uploadFile() {
        if (!this.uploading) {
          this.value = 0;
          this.progressVisible = true;
          this.uploading = true;
          this.timer = setInterval(() => this.value++, 10);
        }
      }    
    },

    mounted() {
      this.actions = [{
        name: '拍照',
        method: this.takePhoto
      }, {
        name: '从相册中选择',
        method: this.openAlbum
      }];
    }
  };     
</script>
<style>
 @component-namespace page {
    @component progress {
      .mint-cell-value {
        flex: 2.5;
        position: relative;
        top: -20px;
      }

      .mt-progress {
        width: 100%;
        position: absolute;
        top: 5px;
      }

      @descendent wrapper {
        padding: 0 10px;
        margin-top: 50px;

        .mt-progress {
          position: relative;
        }

        .progress-fade-transition {
          transition: opacity .3s;
        }

        .progress-fade-enter,
        .progress-fade-leave {
          opacity: 0;
        }
      }
    }
  }

.dq{
  text-align: left;
  height:100%;
}

.type{
  position: relative;
}

.aaa{
  position: absolute;
  top:15px;
  left:114px;
  width:100%;
}
</style>